json-server 常规接口 Mock 功能
本节介绍如何使用 json-server 进行常规的接口 Mock，包括 CRUD 操作、分页查询、自定义中间件以及 nodemon 热重载配置。
快速开始
1. 初始化项目并安装
npm init -y
pnpm install json-server
bash
2. 创建数据文件
// db.json
{
"hello": []
}
json
3. 配置启动脚本
// package.json
{
"scripts": {
"start": "json-server --watch db.json"
}
}
json
执行 pnpm start 即可在 http://localhost:3000 启动 Mock 服务。
CRUD 操作详解
json-server 严格遵循 RESTful 接口规范。
查询（GET）
# 查询全部数据
GET http://localhost:3000/hello
# 查询指定 ID 的数据
GET http://localhost:3000/hello/1
bash
新增（POST）
POST http://localhost:3000/hello
Content-Type: application/json
{
"id": 1,
"message": "hello world"
}
bash
注意：要让新增功能正常工作（支持多条数据），数据必须以数组形式存储在 db.json 中。ID 为自增字段，不传也会自动生成。
更新（PUT）
PUT http://localhost:3000/hello/3
Content-Type: application/json
{
"message": "hello 333"
}
bash
更新操作需要两个部分：
- 路径参数：
/hello/3中的 3 是数据的 ID - Body 参数：包含需要更新的字段
删除（DELETE）
DELETE http://localhost:3000/hello/8
bash
删除成功后返回 status 200，再次查询该 ID 会返回空数据。
新增不存在属性
json-server 使用文件存储方式，新增的属性也能正常保存：
POST http://localhost:3000/hello
Content-Type: application/json
{
"message": "test",
"name": "额外属性"
}
bash
ID 自增机制
持续向接口发送 POST 请求，ID 会持续自增，不需要手动管理。
自定义 Server 配置
1. 创建 server.js
当需要自定义中间件（如自定义分页参数）时，需要创建 server.js 入口文件：
// server.js
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
server.use(middlewares)
// 自定义中间件
server.use((req, res, next) => {
// 在这里添加自定义逻辑
console.log(req.query)
next()
})
server.use(router)
server.listen(3000, () => {
console.log('JSON Server is running')
})
javascript
2. 配置 nodemon 自动重启
pnpm install -D nodemon
bash
// package.json
{
"scripts": {
"start": "json-server --watch db.json",
"dev": "nodemon server.js"
}
}
json
nodemon（Node Monitor）会监听 server.js 及其关联文件的变化，自动重启服务。
自定义分页参数
json-server 默认使用 _page 和 _limit 进行分页：
GET http://localhost:3000/hello?_page=1&_limit=2
text
如果项目使用自定义参数名（如 page 和 size），可以通过中间件转换：
server.use((req, res, next) => {
if (req.method === 'GET' && req.query.size && req.query.page) {
const page = parseInt(req.query.page)
const size = parseInt(req.query.size)
req.query._page = page
req.query._limit = size
}
next()
})
javascript
使用效果：
# 自定义参数
GET http://localhost:3000/hello?page=1&size=2
GET http://localhost:3000/hello?page=2&size=2
text
查询场景汇总
| 场景 | 参数 | 示例 |
|---|---|---|
| 分页 | _page, _limit | ?_page=1&_limit=10 |
| 自定义分页 | page, size（需中间件） | ?page=1&size=10 |
| 筛选 | 字段名=值 | ?message=hello |
| 模糊搜索 | q | ?q=hello |
| 排序 | _sort, _order | ?_sort=id&_order=desc |
完整 server.js 示例
const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
// 加载默认中间件（logger, static, cors, no-cache）
server.use(middlewares)
// 自定义分页参数转换
server.use((req, res, next) => {
if (req.method === 'GET' && req.query.size && req.query.page) {
req.query._page = parseInt(req.query.page)
req.query._limit = parseInt(req.query.size)
}
next()
})
// 挂载路由
server.use(router)
server.listen(3000, () => {
console.log('JSON Server is running at http://localhost:3000')
})
javascript
↑